<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bt3.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
  <style>
    body{
      background-color: #2e2e2e;
    }
    .navbar{
      background-color: black;
      border: 0;  /*0或none 都是去掉边框*/
      margin-top: 10px;
    }
    .navbar-brand>img{
      /*微调某个元素的位置 使用相对定位*/
      position: relative;
      bottom: 12px;
    }
    /*搜索框样式*/
    form>input{
      background-color: #383838;
      border: 0;
      height: 30px;
      border-radius: 30px;/*圆角*/
      padding: 10px 20px;
      margin-top: 10px;
      outline: none;/*去掉外边框*/
      color: #a9a8a8;
    }
    /*搜索按钮样式*/
    form>button{
      background-color: rgba(0,0,0,0); /*背景透明*/
      border: 0;
      color: #a9a8a8;
      position: relative;
      right: 40px;
    }
    /*瀑布流相关样式*/
    .grid-item{
      width: 200px; /*瀑布流元素宽度*/
      margin: 0 10px 10px 0;/*每个元素的间距*/
      overflow: hidden;
    }
    /*右侧边栏相关样式*/
    .list-group-item{
      background-color: black;
      color: #ffc600;
      border: 0;
    }
    .list-head{
      background-color: #ffc600;
      color: black;
    }
    /*蓝色信息条样式*/
    .floatView{
      background-color: #0aa1ed;
      height: 40px;
      text-align: center;
      color: #ffc600;
      position: absolute;/*绝对定位*/
      bottom: 0;/*显示到最下方*/
      width: 100%;
      display: none;/*让元素隐藏*/
    }
    .floatView>p{
      margin: 0;
      font-size: 14px;
    }
    .well{
      background-color: black;
      border: none;
      text-align: center;
      color: #ffc600;
    }
    #detail_div{
      color: #ffc600;
    }
  </style>
</head>
<body>
  <myheader :category_arr="category_arr" :isLogin="isLogin"></myheader>

  <section class="container">

    <!--主体区域开始-->
    <div class="row">
      <div id="detail_div" class="col-md-9">
        <!--详情开始-->
        <h2 v-text="product.title" class="page-header"></h2>
        <div>
          <span v-text="product.author"></span>发布于
          <span v-text="product.created"></span>
          <span class="pull-right"><!--pull-fright让元素显示到右侧类似float:right-->
            <span v-text="product.viewCount" class="fa fa-eye"></span>
            <span v-text="product.likeCount" class="fa fa-thumbs-o-up"></span>
          </span>
        </div>
        <div class="text-center"><!--text-center居中-->
          <button @click="deleteById(product.id)" v-if="isLogin" class="btn btn-danger">删除</button>
          <button @click="likeById(product.id)" class="btn btn-success">点赞</button>
        </div>
        <!--center-block 让图片居中-->
        <img :src="product.imgurl" class="img-responsive center-block" alt="">
        <p v-text="product.intro" class="text-center"></p>
        <!--详情结束-->
      </div>
      <div id="right_div" class="col-md-3">
        <!--浏览最多开始-->
        <ul class="list-group">
          <li class="list-group-item list-head">
            <h4>
              <i class="fa fa-eye">浏览最多</i>
            </h4>
          </li>
          <li v-for="p in view_arr" class="list-group-item">
            <!-- 左对齐 -->
            <div class="media">
              <div class="media-left">
                <a :href="'detail.html?id='+p.id">
                <img :src="p.imgurl" class="media-object" style="width:45px">
                </a>
              </div>
              <div class="media-body">
                <a :href="'detail.html?id='+p.id">
                <h4 v-text="p.title" class="media-heading">左对齐</h4>
                <p v-text="p.intro">这是一些示例文本...</p>
                </a>
              </div>
            </div>
          </li>
        </ul>
        <!--浏览最多结束-->

        <!--最受欢迎开始-->
        <ul class="list-group">
          <li class="list-group-item list-head">
            <h4>
              <i class="fa fa-eye">最受欢迎</i>
            </h4>
          </li>
          <li v-for="p in like_arr" class="list-group-item">
            <!-- 左对齐 -->
            <div class="media">
              <div class="media-left">
                <a :href="'detail.html?id='+p.id">
                <img :src="p.imgurl" class="media-object" style="width:45px">
                </a>
              </div>
              <div class="media-body">
                <a :href="'detail.html?id='+p.id">
                <h4 v-text="p.title" class="media-heading">左对齐</h4>
                </a>
                <p v-text="p.intro">这是一些示例文本...</p>
              </div>
            </div>
          </li>
        </ul>
        <!--最受欢迎结束-->
      </div>
    </div>
    <!--主体区域结束-->
  </section>

  <!--网页底部-->
  <footer class="container">
    <div class="well">
    <b> Copyright © 2018 Tedu.cn All Rights Reserved
      京ICP备16053980号-5 <a href="http://www.tedu.cn/">达内时代科技集团有限公司</a>
      版权所有
    </b> <span class="pull-right"> <b>Version</b> 0.1.0
			</span>
    </div>
  </footer>

</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<!--引入瀑布流相关的js文件-->
<script src="js/masonry.pkgd.min.js"></script>
<!--引入图片加载完成相关的js文件-->
<script src="js/imagesloaded.pkgd.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--日期格式化框架-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script src="js/header.js"></script>
<script src="js/right.js"></script>
<script src="js/detail.js"></script>
</html>





